<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
    {{name}}   <!-- 数据绑定 -->
    {{changeName}}     <!-- 绑定计算属性的changeName -->
    <!-- 通过v-bind:命令绑定属性名 -->
    <!-- 其中class和style比较特殊，要使用数组形式：v-bind:class="[class1]" -->
    <!-- 也可以通过对象的形式：v-bind:class="{class1:classBoolean}",其中class1是class名，而classBoolean才是绑定的变量，为true时才将class1绑定上  （实现添加或删除class） -->
    <span v-bind:data="message" v-bind:id="id">{{name}}</span>
    <!-- v-show 控制节点显示或隐藏,ifshow是绑定的数据，为true时显示，false时内部设为display:none -->
    <!-- v-if也是控制节点显示隐藏，但v-if为false时，是删除节点 -->
    <!-- 频繁切换时，考虑重拍重绘，v-if会更浪费性能 -->
    <div v-show='ifshow'>条件渲染演示</div>
    <!-- items是一个数组，会被v-for遍历，item就是遍历的结果 -->
    <span v-for="item in items">{{item.title}}</span>
    <!-- v-on绑定事件，click为事件名，click1为回调函数，写在methods内 -->
    <button v-on:click="click1">点击</button>
    <!-- 事件修饰符，在事件的回调函数后添加一个.enter，代表只有按下回车键才会触发该事件 -->
    <input type="text" name="" v-on:keyup.enter="keyup1">
    表单，初始化时，会将value的值默认填入input框
    <input type="text" name="" v-model="value">

</div>

<script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
<script type="text/javascript">
    //在vue当中，需要一个dom节点挂载Vue,并且vue语法只在此节点内生效
    var vm = new Vue({
        el: "#demo",   // el对应dom节点的id,就把Vue挂载在了dom节点上了
        data:{   // 数据绑定   所有数据都会绑定到实例vm上
            name:"tanjw",
            message : 123,
            id:"demo1",
            ifshow:false,
            items:[
                {title:"18"},
                {title:"20"}
                ],
            value:123
        },
        //  当name变化时，就会在computed内找一些相关属性
        computed:{  //   计算属性，内部写一些函数
            changeName: function(){  //  当通过控制台改变vm实例name时，changName也会随着变化，监控name的变化
                return "my name is " + this.name;
            }
        },
        methods:{
            // 专门处理异步回调函数
            click1:function() {
                console.log(this);
                },
            keyup1:function() {
                console.log(this.value);
                }
            }
            })
</script>
</body>
</html>
